<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/10/15
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>
</head>
<script type="text/javascript">
    function fileChange(){//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
      alert("change");
        $.ajaxFileUpload({
            url: 'http://localhost:8080/xiaomishop_war_exploded/prod/ajaxImg.action',//用于文件上传的服务器端请求地址
            secureuri: false,//一般设置为false
            fileElementId: 'myfile',//文件上传控件的id属性  <input type="file" id="pimage" name="pimage" />
            dataType: 'json',//返回值类型 一般设置为json
            success: function(data) //服务器成功响应处理函数
            {
                //  	alert(obj);
                $("#imgDiv").empty();  //清空原有数据
                //创建img 标签对象
                var imgObj = $("<img>");
                //给img标签对象追加属性
                //imgObj.attr("src","/image_big/"+data.imgurl);
                imgObj.attr("src",data.imgurl);
                imgObj.attr("width","100px");
                imgObj.attr("height","100px");
                //将图片img标签追加到imgDiv末尾
                $("#imgDiv").append(imgObj);
                //将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
                 $("#imgName").html(data.imgName);
            },
            error: function (e)//服务器响应失败处理函数
            {
                alert(e.message);
            }
        });
    }
</script>
</head>
<body>

<form action="${pageContext.request.contextPath}/prod/save.action" enctype="multipart/form-data" method="post" id="myform">
 商品名字：<input type="text" name="pName" class="two">
    <br/>
   商品描述： <input type="text" name="pContent" class="two">
    <br/>
  图片: <div id="imgDiv" style="display: inline-block; width: 300px; height: 300px;"></div>
    <br/>

    <input type="file" id="myfile" name="myfile" onchange="fileChange()">
    <br/>

    商品类型：<select name="typeId" id="typeId">
    <option value="-1">请选择</option>
    <c:forEach items="${sessionScope.ptlist}" var="pt">

    <option  value="${pt.typeId}">${pt.typeName}</option>
    </c:forEach>

    <input type="submit" value="添加" />

</form>

</body>
</html>
